<style>
	.realtime-page {
		padding-top: 4px;
	}
	.realtime-page .agent-chart {
		float: left;
		position:relative;
		cursor: pointer;
		width: 122px;
		height: 72px;
		margin: 0px 2px 2px 4px;
		border: 1px solid #DDD;
		background-color: #FFF;
	}
	.realtime-page .agent-chart > div {
		color: #000;
		padding: 1px 12px 1px 1px;
		overflow: hidden;
		font-size: 10px;
		word-wrap: normal;
		text-align: center;
		white-space: nowrap;
		text-overflow: ellipsis;
		background-color: rgba(205, 211, 33, 0.5);
	}
	.realtime-page .agent-chart > span {
		font-size: 8px;
		top: 3px;
		right: 0px;
		position: absolute;
		transform: scale(0.8);
	}
	.realtime-page .agent-chart-list svg {
		font: 8px sans-serif;
		display: block;
	}
	.realtime-page .agent-chart-list .axis path {
		fill: none;
		stroke: #000;
		shape-rendering: crispEdges;
	}
	.realtime-page .axis line {
		stroke: #000;
		stroke-opaticy: 0.1;
	}
	.realtime-page .agent-chart-list .guideLine  {
		fill: none;
		stroke: #000;
		shape-rendering: crispEdges;
	}
	.realtime-page .agent-chart-list .x.axis area {
		shape-rendering: auto;
	}
	.realtime-page .agent-chart-list .x.axis path {
		stroke: #AAA;
	}

	.realtime-page .agent-chart-list .area {
		stroke: none;
		stroke-width: 1.5px;
	}
	.realtime-page .agent-chart-list text {
		font-size: 8px;
	}
	.realtime-page .connection-message {
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		position: absolute;
		text-align: center;
		background-color: rgba(200, 200, 200, 0.9);
	}
	.realtime-page .connection-message h4 {
		color: red;
		padding-top: 40px;
		font-weight: bold;
	}
	.realtime-page .request-label text {
		font-size: 11px;
	}
	.realtime-page .request-count text {
		font-size: 14px;
		font-weight: bold;
	}
	.realtime-page .chart-tooltip text {
		font-size: 12px;
	}
	.realtime-page .error {
		font-weight: bold;
		text-anchor: middle;
	}
	.realtime-page .error tspan:nth-child(1){
		y: 0px;
		x: 50%;
	}
	.realtime-page .error tspan:nth-child(2){
		x: 50%;
		dy: 14px;
	}
	.realtime-page text.date {
		fill: #000;
		font-size: 14px;
		text-anchor: middle;
	}
	.realtime-page .grid {
		stroke: rgba(200, 200, 200, 0.4);
		shape-rendering: crispEdges;
	}

</style>
<div style="height:40px;background-color:#252a3a;padding-left:30px;">
	<a href="/"><img class="brand" src="images/logo2.png" width="116" height="18" style="margin-bottom:4px;"/></a>
	<div style="display:inline-block;margin-left:20px;color:#FFF;font-size: 18px;padding-top: 8px">
		<img ng-src="images/icons/{{serviceType}}.png" width="25px" height="25px" style="background-color:white;margin-bottom:4px;margin-right:4px "/>
		<span>{{applicationName}}</span>
		<span>- REALTIME ACTIVE THREAD CHART</span>
	</div>
</div>
<div style="color:white;height:28px;padding: 4px 4px;background-color:#6f6f6f;font-family:sans-serif">
	<span style="font-weight:lighter">Total Servers : </span><span style="font-weight:bolder;font-size:18px;">{{serverTotalCount}}</span> <span>[ {{from}} ~ {{to}} ]</span>
</div>
<div class="realtime-page">
	<div class="agent-chart-list" ng-click="showAgentInfo($event)">
	</div>
	<div class="connection-message">
		<h4 style="padding-top:300px;"></h4>
		<button type="button" class="btn btn-warning" style="display:none" ng-click="retryConnection()"><span class="glyphicon glyphicon-repeat"></span> Retry</button>
	</div>
</div>